$(function() {
    // 1.渲染用户信息,封装成一个函数,后面还会用
    let layer = layui.layer;
    let form = layui.form;
    initUserInfo()


    function initUserInfo() {
        axios({
            method: "GET",
            url: "/my/userinfo",
            /*  headers: {
                 Authorization: localStorage.getItem("token")
             } */
        }).then(res => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            form.val("formUserInfo", res.data.data)
        })
    }

    // 2.自定义校验规则
    form.verify({
        nickname: function(value) {
            if (value.length > 10) {
                return "用户昵称在1-10位之间"
            }
        }

    })

    // 3.修改用户信息
    $("form").on("submit", function(e) {
        e.preventDefault();
        axios({
            method: "POST",
            url: "/my/userinfo",
            data: $("form").serialize(),
            /* headers: {
                Authorization: localStorage.getItem("token")
            },
 */
        }).then(res => {
            // console.log(res);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }

            // 成功给出提示
            layer.msg("恭喜您,修改用户信息成功")
                // 成功后渲染修改后的用户昵称和头像
            window.parent.getUserInfo();
        })
    })

    // 4.重置按钮
    // 4.1按钮的点击事件
    // $("#resetBtn").on("click", function(e) {
    //         e.preventDefault()
    //         initUserInfo()
    //     })
    // 4.2表单的重置事件
    $("form").on("reset", function(e) {
        e.preventDefault()
        initUserInfo()
    })

})